<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- 引入css文件 -->
        <link rel="stylesheet" href="./login.css">
        <!-- 引入jquery -->
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <title>登&nbsp;&nbsp;&nbsp;录</title>
		<style>
			body {
				background-image: url("img/bg.png");
				background-attachment: fixed;
			}
			
			.container {
				text-align: center;
			}
			
			.back-button {
    			display: inline-block;
    			padding: 1px 2px;
    			color: #fff;
    			border: none;
    			border-radius: 5px;
    			cursor: pointer;
    			transition: background-color 0.3s ease-in-out;
				text-align: center;
  			}

  	        .back-button:hover {
    			background-color: #0069d9;
  			}
			
			
		</style>
    </head>
    <body style="background-size: cover;">
        <!-- 最外层的大盒子 -->
       <div class="box">
        <!-- 滑动盒子 -->
        <div class="pre-box">
            <h1>WELCOME</h1>
            <p>JOIN US!</p>
            <div class="img-box">
                <img src="./img/waoku.jpg" alt="">
            </div>
        </div>
        <!-- 注册盒子 -->
        <div class="register-form">
            <!-- 标题盒子 -->
            <div class="title-box">
                <h1>注&nbsp;&nbsp;&nbsp;册</h1>
            </div>
            <!-- 输入框盒子 -->
            <div class="input-box">
                <input type="text" placeholder="用户名">
                <input type="password" placeholder="密码">
                <input type="password" placeholder="确认密码">
            </div>
            <!-- 按钮盒子 -->
            <div class="btn-box">
                <button>注&nbsp;&nbsp;&nbsp;册</button>
                <!-- 绑定点击事件 -->
                <p onclick="mySwitch()">已有账号?去登录</p>
            </div>
			<br>
			<div class="container">
		        <button type="button" class="back-button" onClick="window.location.href='home.html'" style="background-color: #69B3F0">Back</button>
	        </div>
        </div>
        <!-- 登录盒子 -->
        <div class="login-form">
            <!-- 标题盒子 -->
            <div class="title-box">
                <h1>登&nbsp;&nbsp;&nbsp;录</h1>
            </div>
            <!-- 输入框盒子 -->
            <div class="input-box">
                <input type="text" placeholder="用户名">
                <input type="password" placeholder="密码">
            </div>
            <!-- 按钮盒子 -->
            <div class="btn-box">
                <button>登&nbsp;&nbsp;&nbsp;录</button>
                <!-- 绑定点击事件 -->
                <p onclick="mySwitch()">没有账号?去注册</p>
            </div>
			<br>
			<div class="container">
		        <button type="button" class="back-button" onClick="window.location.href='home.html'"  style="background-color: #EDD4DC">回到主页</button>
	        </div>
        </div>
       </div>
       <script>
            // 滑动的状态
             let flag=true
             const mySwitch=()=>{
                if(flag){
                    // 获取到滑动盒子的dom元素并修改它移动的位置
                    $(".pre-box").css("transform","translateX(100%)")
                    // 获取到滑动盒子的dom元素并修改它的背景颜色
                    $(".pre-box").css("background-color","#c9e0ed")
                    //修改图片的路径
                    $("img").attr("src","./img/wuwu.jpeg")
                    
                }
                else {
                    $(".pre-box").css("transform","translateX(0%)")
                    $(".pre-box").css("background-color","#edd4dc")
                    $("img").attr("src","./img/waoku.jpg")
                }
                flag=!flag
             }
       </script>
    </body>
</html>